<template>
  <view class="User">
    <view class="mt-5" v-if="u_loadmore">
      <u-loadmore status="loading" icon-type="circle" />
    </view>
    <view class="" v-else>
      <view class="pl-3 mt-3 bg-white border-bottom border-top">
        <view class="d-flex j-sb a-center py-2 " @click="unloadImg">
          <view class="">头像</view>
          <view class="d-flex j-center a-center pr-2">
            <view class="mr-1">
              <image-cropper :src="tempFilePath" @confirm="confirm_img" @cancel="() => {}"></image-cropper>
              <view class="" v-if="cropFilePath">
                <image :src="cropFilePath" mode="aspectFit" class="login_img"></image>
              </view>
              <image v-else class="login_img"
                :src="User.avator_img?User.avator_img:'../../static/images/tabBar/ecmoban_logo.png'" mode=""></image>
            </view>
            <image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
          </view>
        </view>

        <view class="d-flex border-top j-sb pr-2 py-3" @click="persons()">
          <view class="">用户名</view>
          <view class="d-flex j-center a-center">
            <text class="text-light-muted">{{User.username}}</text>
            <image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
          </view>
        </view>
        <view class="d-flex border-top j-sb pr-2 py-3">
          <view class="">上次登录</view>
          <view class="d-flex j-center a-center">
            <text class="text-light-muted">{{User.last_login}}</text>
          </view>
        </view>
      </view>

      <view class="pl-3 mt-3 bg-white">
        <view class="d-flex j-sb pr-2 py-3" @click="onPhone">
          <view class="">绑定手机号</view>
          <view class="d-flex j-center a-center">
            <text class="text-light-muted">{{User.mobile}}</text>
            <image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
          </view>
        </view>
        <view class="d-flex border-top j-sb pr-2 py-3" @click="onEmail">
          <view class="">绑定邮箱</view>
          <view class="d-flex j-center a-center">
            <text class="text-light-muted">{{User.email}}</text>
            <image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
          </view>
        </view>
        <view class="d-flex border-top j-sb pr-2 py-3" @click="modifyPass">
          <view class="">修改密码</view>
          <view class="d-flex j-center a-center">
            <image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
          </view>
        </view>
      </view>

      <view class="mx-3 mt-5">
        <button type="warn" @click="logOut">退出登录</button>
      </view>
    </view>

    <!-- 退出弹出层 -->
    <uni-popup ref="popup" type="center" class="logOutPopup">
      <view class="popup_wd">
        <view class="py-2 bg-danger text-white text-center">退出</view>
        <view class="py-5 text-center bg-white">确定要退出？</view>
        <view class="d-flex  bg-light-secondary">
          <view class="flex-1 py-2 text-center border-right" @click="Off">取消</view>
          <view class="flex-1 py-2 text-center" @click="Confirm">确定</view>
        </view>
      </view>
    </uni-popup>
    <!-- 上传头像 -->
    <s-popup custom-class="demo-popup" position="bottom" v-model="pictureShow">
      <!-- 内容 -->
      <view class="m-2 bg-white rounded-20 icon_share">
        <view class="border-bottom d-flex ml-4 py-3 j-center a-center" @click="photos">
          <view class="">拍照</view>
        </view>
        <view class="d-flex ml-4 py-3 j-center a-center" @click="album">
          <view class="">我的相册</view>
        </view>
      </view>
      <view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25" @click="cancelShare">
        取消
      </view>
    </s-popup>

  </view>
</template>

<script>
  import sPopup from '../../components/s-popup/index.vue';
  import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
  import {
    mapState
  } from 'vuex';
  export default {
    components: {
      ImageCropper,
      sPopup
    },
    data() {
      return {
        User: null,
        tempFilePath: '',
        cropFilePath: '',
        pictureShow: false, // 添加图片模态框
        dictionaries: "", // 上传图片字典
        u_loadmore: true, // 加载中
      }
    },
    computed: {
      ...mapState({
        loginStatus: state => state.user.loginStatus,
        userInfo: (state) => state.user.userInfo,
        token: (state) => state.user.token
      })
    },
    onLoad(e) {
      this.getuser()
    },
    methods: {
      getuser(){
        if (uni.getStorageSync("toggle_default")) {
          this.$H.post("admin/user/userinfo").then(res => {
            this.User = res.data
            console.log(res)
            uni.setStorageSync("users", res.data)
            this.u_loadmore = false
            
            let promise = uni.$tim.updateMyProfile({
              avatar: res.data.avator_img
            })
            promise.then(function(imResponse) {
              console.log(imResponse.data); // 更新资料成功
            }).catch(function(imError) {
              console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
            });
          })
        } else if (uni.getStorageSync("toggle_demo")) {
          this.$H.post("admin/user/userinfo").then(res => {
            this.User = res.data
            console.log(res)
            uni.setStorageSync("users_demo", res.data)
            this.u_loadmore = false
            
            let promise = uni.$tim.updateMyProfile({
              avatar: res.data.avator_img
            })
            promise.then(function(imResponse) {
              console.log(imResponse.data); // 更新资料成功
            }).catch(function(imError) {
              console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
            });
          })
        } else {
          this.$H.post("admin/user/userinfo").then(res => {
            this.User = res.data
            console.log(res)
            uni.setStorageSync("users", res.data)
            this.u_loadmore = false
            
            let promise = uni.$tim.updateMyProfile({
              avatar: res.data.avator_img
            })
            promise.then(function(imResponse) {
              console.log(imResponse.data); // 更新资料成功
            }).catch(function(imError) {
              console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
            });
          })
        }
      },
      connectSocketInit() {
        // uni.showLoading({
        //   mask: true,
        //   title: "请稍后"
        // })
        // 店铺信息
        this.$H.post("admin/user/tim/sign").then(res => {
          let promise = uni.$tim.login({
            userID: uni.getStorageSync('user_id').toString(),
            userSig: res.data.sign
          })
          promise.then((imResponse) => {
            console.log(imResponse.data); // 登录成功
            if (imResponse.data.repeatLogin === true) {
              // 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
              // console.log(imResponse.data.errorInfo);
            }
            // uni.$tim.on('TIM.EVENT.SDK_READY', this.chatList);
          }).catch((imError) => {
            console.warn('login error:', imError); // 登录失败的相关信息
          });
        })
      },
      //头像
      // 上传图片
      unloadImg() {
        this.pictureShow = true;
      },
      // 拍照
      photos() {
        let that = this;
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ['camera'], //从相册选择
          success: (res) => {
            console.log(res, "拍照")
            this.tempFilePath = res.tempFilePaths[0]
            // console.log(this.tempFilePath);
            this.$H.post("admin/user/update", {
              avatar_img: this.dictionaries
            }).then(res => {
              console.log(res)
            })
          }
        });
        that.pictureShow = false;
      },
      // 取消
      cancelShare() {
        this.pictureShow = false;
      },
      // 我的相册
      album() {
        let that = this;
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ['album'], //从相册选择
          success: (res) => {
            console.log(res, "我的相册")
            uni.showToast({
              title: "上传中...",
              icon: "loading",
              mask: true,
              duration: 5000,
            });
            this.tempFilePath = res.tempFilePaths[0]
          }
        });
        that.pictureShow = false;
      },
      // 裁剪图片
      confirm_img(e) {
        this.tempFilePath = ''
        this.cropFilePath = e.detail.tempFilePath
        this.uploadFile(this.cropFilePath)
        this.pictureShow = false;
        console.log(e.detail.tempFilePath)
      },
      uploadFile(filePath) {
        console.log(filePath)
        uni.uploadFile({
          url: `${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
          filePath: filePath,
          name: "tempimage",
          formData: {
            'token': uni.getStorageSync("token")
          },
          success: (res) => {
            let fileData = JSON.parse(res.data)
            this.dictionaries = fileData.data

            console.log(fileData)
            this.$H.post("admin/user/update", {
              avatar_img: this.dictionaries
            }).then(res => {
              // console.log(res)
              // 修改个人标配资料
              this.getuser()
              
            })
          }
        })
      },

      toJSON() {
        return this
      },
      // 修改用户名
      persons() {
        uni.navigateTo({
          url: "/pagesA/user/person"
        })
      },
      //绑定手机号
      onPhone() {
        uni.navigateTo({
          url: "/pagesA/user/binding?mobile=" + this.User.mobile
        })
      },
      //绑定邮箱
      onEmail() {
        uni.navigateTo({
          url: "/pagesA/user/bind-email?email=" + this.User.email
        })
      },
      //修改密码
      modifyPass() {
        uni.navigateTo({
          url: "/pagesA/user/modify"
        })
      },
      //退出登录
      logOut() {
        this.$refs.popup.open()
      },
      //退出登录 弹出框 取消
      Off() {
        this.$refs.popup.close()
      },
      //退出登录 弹出框 确认
      Confirm() {
        this.$refs.popup.close()
        this.$H.post("admin/user/signout").then(res => {
          uni.removeStorageSync('token');
          uni.removeStorageSync('user_id');
          uni.$tim.logout();
          uni.reLaunch({
            url: "/pages/login/login"
          })
          
          
        })
      }
    }
  }
</script>

<style>
  .vue-ref {
    border-radius: 10upx;
  }

  .logOutPopup /deep/ .popup_wd {
    width: 600upx;
  }

  .icon_gray {
    width: 220upx;
    height: 220upx;
  }

  .icon_gray_camera {
    width: 100upx;
    height: 100upx;
  }

  .release {
    z-index: 22;
  }

  .release /deep/ button {
    width: 85%;
    border-radius: 50upx;
    background: linear-gradient(to right, #F31E3E, #FB4F37);
  }

  .img {
    width: 100%;
    height: 100%;
  }

  .crop {
    overflow: hidden;
    width: 220upx;
    height: 220upx;
  }

  .s-popup-mask {
    background: rgba(204, 204, 204, 0.3) !important;
  }

  .content {
    background-color: rgb(237, 237, 237) !important;
    color: #666666;
  }

  .s-popup-wrap {
    background: rgba(204, 204, 204, 0) !important;
  }

  .icon_share view {
    color: #888;
  }

  .icon_share image {
    width: 120upx;
    height: 120upx;
  }
</style>
